import React from 'react';
import {getListData} from '../../../fetch/get'
import LoadMore from '../../../components/loadMore'
export default class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoadingMore:false,
      page:2
    }
  }

  render() {
    return (
      <div>
        ListSubpage {this.props.cityName}
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <br/><br/><br/><br/><br/>
        <div>4</div>
        {this.state.data.map((item, index) => {
          return <div className="flex_row" key={index}>
            <div>{item.title}</div>
            <div>{item.price}</div>
            <div>{item.categories[0]}</div>
          </div>
        })}
        <LoadMore loadMoreFn={this.loadMoreData.bind(this)} isLoading={this.state.isLoadingMore}/>
      </div>
    )
  }

  loadMoreData(){
   this.setState({
     isLoadingMore:true
   });
   const page = this.state.page;
   let result = getListData(page);
   this.resultHandle(result);
   this.setState({
     page:page+1,
     isLoadingMore:false
   });

    console.log(123)
  }

  componentDidMount() {
    let res = getListData(1);
    this.resultHandle(res);
  }

  resultHandle(result) {
    result.then((res) => res.json())
      .then(res => {
        console.log(res);
        this.setState({
          data: this.state.data.concat(res)
        })
      })
  }
}